<template>
  <div class="chain-container sellOffer-container chain-index-container">
      <div class="banner h-banner2">
            <!-- <img src="./../../../static/img/chain/gy.jpg"> -->

            <div class="chain-choose-list">
                <div class="chain-title">产品类型</div> 
                <a-menu class="chain-tab-menu"
                  mode="vertical">
                  <a-sub-menu key="sub1">
                    <span slot="title"><span>茶叶 <i>tea leaf</i></span></span>
                    <a-menu-item class="chain-tab-item">
                      <a-row>
                        <a-col :span="8"><nuxt-link to="/">乌龙茶</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">红茶</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">绿茶</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">白茶</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">黑茶</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">黄茶</nuxt-link></a-col>
                      </a-row>
                    </a-menu-item>
                  </a-sub-menu>
                  <a-sub-menu key="sub2">
                    <span slot="title"><span>咖啡 <i>Coffee</i></span></span>
                    <a-menu-item class="chain-tab-item">
                      <a-row>
                        <a-col :span="8"><nuxt-link to="/">铁皮卡</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">波邦</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">阿拉比卡豆</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">罗布斯塔</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">蓝山</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">摩卡</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">哥伦比亚</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">曼特宁</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">炭烧</nuxt-link></a-col>
                      </a-row>
                    </a-menu-item>
                  </a-sub-menu>
                  <a-sub-menu key="sub3">
                    <span slot="title"><span>花卉 <i>Flowers</i></span></span>
                    <a-menu-item class="chain-tab-item">
                      <a-row>
                        <a-col :span="8"><nuxt-link to="/">雷神</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">昙花</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">牡丹</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">茉莉</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">玉蝶</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">星美人</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">满天星</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">乙女心</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">珍珠吊兰</nuxt-link></a-col>
                      </a-row>
                    </a-menu-item>
                  </a-sub-menu>
                  <a-sub-menu key="sub4">
                    <span slot="title"><span>坚果 <i>Nut</i></span></span>
                    <a-menu-item class="chain-tab-item">
                      <a-row>
                        <a-col :span="8"><nuxt-link to="/">板栗</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">榛子</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">腰果</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">核桃</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">瓜子</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">杏仁</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">大枣</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">开心果</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">花生</nuxt-link></a-col>
                      </a-row>
                    </a-menu-item>
                  </a-sub-menu>
                  <a-sub-menu key="sub5">
                    <span slot="title"><span>牛肉 <i>Beef</i></span></span>
                    <a-menu-item class="chain-tab-item">
                      <a-row>
                        <a-col :span="8"><nuxt-link to="/">犊牛肉</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">嫩牛肉</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">小肥牛肉</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">肥牛肉</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">西冷</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">菲力</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">沙朗</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">新晃黄牛肉</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">雪花牛肉</nuxt-link></a-col>
                      </a-row>
                    </a-menu-item>
                  </a-sub-menu>
                  <a-sub-menu key="sub6">
                    <span slot="title"><span>蔬菜 <i>Vegetables</i></span></span>
                    <a-menu-item class="chain-tab-item">
                      <a-row>
                        <a-col :span="8"><nuxt-link to="/">胡萝卜</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">红薯</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">马铃薯</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">莴苣</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">竹笋</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">小白菜</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">甘蓝</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">韭菜</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">香菇</nuxt-link></a-col>
                      </a-row>
                    </a-menu-item>
                  </a-sub-menu>
                  <a-sub-menu key="sub7">
                    <span slot="title"><span>水果 <i>Fruit</i></span></span>
                    <a-menu-item class="chain-tab-item">
                      <a-row>
                        <a-col :span="8"><nuxt-link to="/">苹果</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">沙果</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">海棠</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">野樱莓</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">山楂</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">橘子</nuxt-link></a-col>
                      </a-row>
                    </a-menu-item>
                  </a-sub-menu>
                  <a-sub-menu key="sub8">
                    <span slot="title"><span>中药材 <i>Medicine</i></span></span>
                    <a-menu-item class="chain-tab-item">
                      <a-row>
                        <a-col :span="8"><nuxt-link to="/">人参</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">白术</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">茯苓</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">甘草</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">当归</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">白芍</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">黄莲</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">栀子</nuxt-link></a-col>
                        <a-col :span="8"><nuxt-link to="/">连翘</nuxt-link></a-col>
                      </a-row>
                    </a-menu-item>
                  </a-sub-menu>
                </a-menu>
            </div>
      </div>
      <div class="invite-1200">
          <a-form layout="inline" :form="form">
                <a-form-item label='货品类型：' :span='10'>
                        <a-select placeholder="全部" :defaultValue="type" v-model="type" style="width: 190px;height:40px;" >
                            <a-select-option value="">全部</a-select-option>
                            <a-select-option v-for="(item,index) in highwayList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
                        </a-select>
                      <!-- <a-input  placeholder="请选择货品类型" :span='14' style='width:190px;'></a-input> -->
                </a-form-item>
                <a-form-item label='关键字：'>
                      <a-input placeholder="请输入关键字" style='width:190px;' v-model="name" ></a-input>
                </a-form-item>
                <a-form-item>
                      <a-button class='ant-btn-primary' type="primary" @click="sellOfferList">搜索</a-button>
               </a-form-item>
               <a-form-item>
                      <a-button @click="react">重置</a-button>
               </a-form-item>
              <!--  <a-form-item style='margin-right:0; float:right;'>
                      <a-button class='ant-btn-danger ' type="danger">发布供应信息</a-button>
               </a-form-item> -->
          </a-form>
           <!-- 数据展示 -->
          <div class="tender-title">
                <span></span>
                <h2>供应信息</h2>
          </div>
          <div class="tender-line"></div>
          <div class="tender-list sell-goods-list wy-m-t-20">
                  <div class="tender-list-title">
                        <ul>
                              <li>货品信息</li>
                              <li>供货商</li>
                              <li>价格</li>
                              <li>发布时间</li>
                              <li>查看</li>
                        </ul>
                  </div>
                  <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="supplyList"><!--:dataSource="supplyList"-->
                        <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                            <div class="invite-box-conent">
                                    <div class="goods-pic">
                                          <img :src="FileUploadUrl2+item.imgPaths">
                                    </div>
                                    <div class="goods-name">
                                          <h4>{{item.subject}}</h4>
                                          <div style="margin-top: 15px;">
                                            <p style="margin-top: 5px;">货品类型：<span>{{item.typeValue}}</span></p>
                                            <p>货品名称：<span>{{item.name}}</span></p>
                                            <p>产地：<span>{{item.producePlace}}</span></p>
                                            
                                            <p>供应周期：<span>{{item.cycleStart}}月</span>-<span>{{item.cycleEnd}}月</span></p>
                                            <p>数量：<span>{{item.number}}</span><span>{{item.numberUnitValue}}</span></p>
                                          </div>
                                   </div>
                            </div>
                            <div class="invite-box-conent" style="margin-top: 44px">
                                    <h4> {{item.company}}</h4>
                                    <div class="useStar">
                                          <span>用户星级</span>
                                          <a-rate :defaultValue="2.5" disabled allowHalf />
                                          <div class="attestaion">已认证</div>
                                    </div>
                            </div>
                            <div class="invite-box-conent">
                                    <i class="goods-money">{{parseInt(item.price)}}</i>
                                    <span class="goods-kg" :key="index" :value="item.dictKey">{{item.priceUnitValue}}</span>
                            </div>
                            <div class="invite-box-conent">
                                    <p>{{item.createTime?item.createTime.split(' ')[0]:''}}</p>
                            </div>
                            <div class="invite-box-conent">
                                      <a-button v-if="loggedIn" class='ant-btn-primary goods-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                                      <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary goods-sell' type="primary">立即沟通</a-button></router-link>
                                      <nuxt-link :to="`/chain/sellOffer/${item.greenFoodSupplyId}`">
                                          <a-button class='goods-detail'>查看详情</a-button>
                                      </nuxt-link>
                            </div>
                       </a-list-item>
                  </a-list>
          </div>
      </div>
      <!-- 弹框 -->
       <Elastic :userId="userId"  ref='elastic'></Elastic>
  </div>
</template>

<script>
// import { chainData } from './../../../utils/chainData'
import Elastic from './../../../components/dialog/Elastic'
import AuthMixin from '~/mixins/auth'
import { environment } from '@/server/environment'

export default {
  mixins: [ AuthMixin ],
   components: {
      Elastic,
    },
  data () {
    return {
      // supplyList: chainData.supply.slice(0,6),

       pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          showSizeChanger: true,
          total:10,
          showTotal: (total, range) => `共 ${total} 条记录`
        },
        type: '',
        userId:'',
        highwayList: [],
        name:'',
        supplyList:[],
        FileUploadUrl2:environment.FileUploadUrl2,
        data:[]
        
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  created :function(){
    const _type = this.$route.query.type;
    if ( _type ) this.type = parseInt(_type);
    this.infoCommonDict(29)
    this.sellOfferList()
  },
  methods:{
      // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 29: this.highwayList = res.data.rows; break;
            }
          } 
      },
      //重置
      react (){
        this.type = '' //货品类型
        this.name = '' //货品名称关键字
        this.sellOfferList()

      },
      //查询 获取供应信息
      async sellOfferList () {
        const res = await this.$store.dispatch('info/sellOfferList',{
          pageSize: this.pagination.defaultPageSize,
          pageNum: this.pagination.defaultCurrent,
          name:this.name,
          type:this.type
        })
        if(res.status){
          this.supplyList = res.data.rows
          this.pagination.total = res.data.total
          // console.log(this.supplyList,1111111)
        }else{
          this.supplyList = [];
          this.pagination.total = 0
        }
        
      
    },
    elasticShowModal(id){
        this.userId = id
        this.$refs.elastic.showModal(id);
    },
  }
}
</script>
<style lang="scss" scoped>
@import "./../../../assets/css/chain/sellOffer.scss";
@import "../../../assets/css/chain/chain.scss";
.chain-containe{
  height: 160px;
}
.sellOffer-container{
  .ant-select-selection--single{
    height: 40px;
    .ant-select-selection__rendered{
      line-height: 40px;
    }
  }
  .tender-list{
    .tender-list-title{
      width:1200px;
      height:40px;
      background:#F7F7F7;
      border-bottom:1px solid #D8D8D8;
      ul{
        margin:0;
        li{
            float:left;
            text-align:center;
            line-height:40px;
            font-size:16px;
            font-weight:400;
            color:#333333;
        }
        li:first-child{
          width:403px;
          border-right:1px solid  #EFEFEF;
        }
        li:nth-child(2){
          width:323px;
          border-right:1px solid  #EFEFEF;
        }
        li:nth-child(3){
          width:169px;
          border-right:1px solid  #EFEFEF;
        }
        li:nth-child(4){
          width:152px;
          border-right:1px solid  #EFEFEF;
        }
        li:last-child{
           width:149px;
           text-align: right;
             padding-right: 56px;
        }
      }
    }
  }
}

.chain-tab-menu{
   width: 160px;
   height:56px;
   line-height:55px;
   .ant-menu-submenu-title{
      margin:0 !important;
      height:56px !important;
      line-height:56px !important;
      padding:0 25px !important;
      span{
          color:#FFFFFF !important;
      }
    }
     li{
       border-bottom:1px solid rgba(254,254,254,0.4);
    }
    .ant-menu-submenu-active,.ant-menu-submenu-title:hover{
       background:#FFFFFF !important;
       color:#15837A !important;
    }
     .ant-menu-submenu-active,.ant-menu-submenu-title:active{
          background:none !important;
    }
    .ant-menu-submenu-active,.ant-menu-submenu-title:hover span{
      color:#15837A !important;
    }
    .ant-menu-submenu-active,.ant-menu-submenu-title:hover i{
      color:#15837A !important;
    }
  .ant-menu-submenu-arrow{
     display: none;
  }
  span{
      font-size:16px;
      color:#FFFFFF;
      display:inline-block;
  }
  i{
    font-style:normal;
    font-size:14px;
    color:#FFFFFF;
    margin-left:10px;
  }
}
.chain-tab-item{
    width:300px;
    position: absolute !important;
    left: -4px !important;
    background: #ffffff !important;
    top: -4px !important;
    color: #333333;
    height: auto !important;
    margin: 15px 0 0 0;
    padding: 0px !important;
    text-align: center;
   .ant-col-8{
      border-right: 1px solid #dddddd;
      text-align: center;
      margin:0px 0 20px 0;
      line-height: 22px;
    }
    a{
      color: #333333;
      font-size:14px;
    }
    .ant-col-8:nth-child(1){
        margin-top:20px;
    }
    .ant-col-8:nth-child(2){
        margin-top:20px;
    }
    .ant-col-8:nth-child(3){
        margin-top:20px;
    }
}
.invite-box-conent{
  .invite-box-conent:nth-child(2){
		width:323px;
		margin-top:44px !important;
	}
}
.h-banner2{
  width: 100%;
  height: 500px;
  background: url('~static/img/chain/gy.jpg') center top / cover no-repeat;
}
</style>